<template>
  <el-menu :default-openeds="openeds" :default-active="activeMenu" style="width:280px;height:100%"
    class="el-menu-vertical-demo">
    <template v-for="item, index in optionsList">
      <el-submenu v-if="item[treePropstype.children] && item[treePropstype.children].length > 0" :index="index + ''"
        :key="index">
        <template slot="title">{{ item[treePropstype.label] }}</template>
        <el-menu-item @click="handleClick(group)" :index="index + '-' + group_index"
          v-for="group, group_index in item[treePropstype.children] || []" :key="group_index">{{
            group[treePropstype.label] }}</el-menu-item>
      </el-submenu>
      <el-menu-item @click="handleClick(item)" v-else :index="index + ''" :key="index"><span slot="title">{{
        item[treePropstype.label] }}
        </span></el-menu-item>
    </template>
  </el-menu>
</template>  
<script>

export default {
  props: {
    optionsList: {
      type: Array,
      default: () => {
        return []
      }
    },
    treePropstype: {
      type: Object,
      default: () => {
        return {
          children: "children",
          label: "deviceName"
        }
      }
    }
  },
  data() {
    return {
      activeMenu: '0-0',
      openeds: []
    };
  },
  watch: {
    // 监听obj对象的变化，包括其内部属性的变化  
    optionsList: {
      handler(newValue, oldValue) {
        this.initData()
      },
      deep: true
    }
  },
  methods: {
    initData() {
      this.openeds = [];
      this.optionsList.forEach((item, index) => {
        this.openeds.push(index + '');
      });
      let option = this.optionsList.length > 0 ? this.optionsList[0] : null;
      let data = option && option.children && option.children.length > 0 ? option.children[0] : option;
      data && this.handleClick(data);
    },
    handleClick(data) {
      this.$emit('getMenuData', data || {})
    },
  }
};
</script>
<style scoped>
.el-menu {
  border-right: 1px solid #f1f1f1;
  padding: 10px;
}

.el-menu-vertical-demo {
  overflow: auto;
}
</style>